<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="easyui.css" />
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js" ></script>

<title>js全国城市三级联动 - 站长素材</title>
<style type="text/css">
body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }
a{ color:#006600; text-decoration:none;}
a:hover{color:#990000;}

</style>
</head>
<body>
<div class="top">
    <h1 style="text-align:center">js全国城市三级联动</h1>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
　　<tr>
　　　　<td>
　　　　   <!-- 暂无 港澳台 如需要可在city.json文件中添加-->
　　　　　　<select id="province" name="province" onchange="doProvAndCityRelation();">
　　　　　　　　<option id="choosePro" value="-1">请选择您所在省份</option>
　　　　　　</select>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>
　　　　　　<select id="citys" name="city" onchange="doCityAndCountyRelation();">
　　　　　　　　<option id='chooseCity' value='-1'>请选择您所在城市</option>
　　　　　　</select>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>
　　　　　　<select id="county" name="county">
　　　　　　　　<option id='chooseCounty' value='-1'>请选择您所在区/县</option>
　　　　　　</select>
　　　　</td>
　　</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

</body>
<script language="javascript">
　　　　　　var cityJson;
            $(function(){
                //load city.json
                $.getJSON(
                    "pca-code.json", 
                    function(obj) {
                        cityJson = obj;                       
                        var sb = new StringBuffer();
                        $.each(obj, function(i, val) {
                            
                                sb.append("<option value='"+val.code+"'>"+val.name+"</option>");
                          
                        });
                        $("#choosePro").after(sb.toString());
                    }
                );
            });
　　　　　　　　　 // 省值变化时 处理市
            function doProvAndCityRelation(){
                var city = $("#citys");
                var county = $("#county");
                if(city.children().length > 1){
                    city.empty();
                }
                if(county.children().length > 1){
                    county.empty();
                }
                if($("#chooseCity").length == 0){
                    city.append("<option id='chooseCity' value='-1'>请选择您所在城市</option>");
                }
                if($("#chooseCounty").length == 0){
                    county.append("<option id='chooseCounty' value='-1'>请选择您所在区/县</option>");
                }
                var sb = new StringBuffer();

                //cityJson 就是省市区的集合
                
                /*$.each(cityJson, function(i, val) {

                    var pro_childs =  val.childs  //得到所有的省份
                    $.each(pro_childs, function(j, proVal) {// 然后省份循环寻找与省份对应的城市
                        //console.log(JSON.stringify(cityVal.name))
                        if(proVal.code.substr(0, 2) == $("#province").val()){
                            console.log(JSON.stringify(proVal))
                            var trueCity = proVal.name
                            $.each(pro_childs, function(h, cityVal) {  //然后把城市循环出来
                                sb.append("<option value='"+cityVal.code+"'>"+cityVal.name+"</option>");
                            })
                        }
                        
                    })                    
                    
                });*/
                $.each(cityJson, function(i, val) {
                	var pro_childs =  val.childs  //得到所有的省份
                	
                	$.each(pro_childs, function(j, proVal) {// 然后 省份循环 寻找与省份对应的城市
                		if(proVal.code.substr(0, 2) == $("#province").val()){ //判断省份的code 是否与省份的val 相同
                			/*console.log(JSON.stringify(proVal.code))
                			console.log(JSON.stringify(proVal))//获取的是所有的城市*/
                			
                			sb.append("<option value='"+proVal.code+"'>"+proVal.name+"</option>");
                			
                		}
                	})
                })
                
                $("#chooseCity").after(sb.toString());
            }
　　　　　　　　　 // 市值变化时 处理区/县
            function doCityAndCountyRelation(){
                var cityVal = $("#citys").val();
                var county = $("#county");
                if(county.children().length > 1){
                    county.empty();
                }
                if($("#chooseCounty").length == 0){
                    county.append("<option id='chooseCounty' value='-1'>请选择您所在区/县</option>");
                }
                var sb = new StringBuffer();
                
                $.each(cityJson, function(i, val) {
                	var pro_childs =  val.childs  //得到所有的省份
                	
                	$.each(pro_childs, function(j, proVal) {// 然后  省份循环 寻找与省份对应的城市
                		if(proVal.code.substr(0, 2) == $("#province").val()){ //判断省份的code 是否与省份的val 相同
                			
                			var country_childs =  proVal.childs
                			
                			$.each(country_childs, function(k, countryVal) {  //循环城市，查找与城市编码相同的区县
                				if(countryVal.code.substr(0, 4) == $("#citys").val()){
                					sb.append("<option value='"+countryVal.code+"'>"+countryVal.name+"</option>");
                				}
                				
                			})
                			
                			
                		}
                	})
                })
                
  
                $("#chooseCounty").after(sb.toString());
                
            }
            
            function StringBuffer(str){    
                var arr = [];    
                str = str || "";
                var size = 0 ;  // 存放数组大小
                arr.push(str);
                // 追加字符串
                this.append = function(str1) {        
                    arr.push(str1);        
                    return this;    
                };
                // 返回字符串
                this.toString = function(){        
                    return arr.join("");    
                };
                // 清空  
                this.clear = function(key){  
                    size = 0 ;  
                    arr = [] ;  
                }
                // 返回数组大小  
                this.size = function(){  
                    return size ;  
                }
                // 返回数组  
                this.toArray = function(){  
                    return buffer ;  
                }
                // 倒序返回字符串  
                this.doReverse = function(){  
                    var str = buffer.join('') ;   
                    str = str.split('');    
                    return str.reverse().join('');  
                }
            };
        </script>